<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="接警信息">
      <a-list size="large" bordered :data-source="alarmInformation">
        <template #renderItem="{ item }">
          <a-list-item>{{ item.fieldName }}：{{ item.value }}</a-list-item>
        </template>
      </a-list>
    </a-tab-pane>
    <a-tab-pane key="2" tab="出警信息" force-render>
      <div v-if="policeInformation == ''"><a-empty /></div>
    </a-tab-pane>
    <a-tab-pane key="3" tab="反馈信息">
      <a-tabs type="card" v-model:feedbackInformationKey="feedbackInformationKey">
        <a-tab-pane
          v-for="(feedbackItem, index) in feedbackInformation"
          :key="index"
          :tab="'第' + (index + 1) + '次反馈'"
        >
          <a-list size="large" bordered :data-source="feedbackItem">
            <template #renderItem="{ item }">
              <a-list-item>{{ item.fieldName }}：{{ item.value }}</a-list-item>
            </template>
          </a-list>
        </a-tab-pane>
      </a-tabs>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import PoliceInformationDetails from '../js/callThePolice';
import Feedback from '../js/feedback';
import { policeDetails } from '../typing';

export default defineComponent({
  setup() {
    //接警信息
    const alarmInformation = ref<Array<policeDetails>>([]);
    alarmInformation.value = PoliceInformationDetails.RESULT;

    //出警信息
    const policeInformation = ref<Array<policeDetails>>([]);

    //反馈信息
    type DataType = Array<Array<policeDetails>>;
    const feedbackInformation: DataType = Feedback.RESULT;

    return {
      activeKey: ref('1'),
      feedbackInformationKey: ref('0'),
      alarmInformation,
      policeInformation,
      feedbackInformation,
    };
  },
});
</script>

<style></style>
